<template>
	<view>
		<view class="heads">
			<view 
			 v-for="(item,index) in list" :key="item.name"
			@tap="currentEve(index)"
			
			
			class="heads-item">
			<view  :class="{red : current ==  index}">
				{{item.name}}
			</view>
			 
			<view class="heads-item1"  v-if="index==1||index==2">
				<uni-icons type="arrowup" 
				:color="item.isIconSelected == 'up' ? 'red' : ''"
				size="15"  ></uni-icons>
				<uni-icons type="arrowdown" 
				:color="item.isIconSelected == 'down' ? 'red' : ''"
				size="15" ></uni-icons>	
			</view>
		
			 </view>
		
			  
			
			
		</view>
		<!-- 照片展示页 -->
		<view class="show-img">
			<view class="show-content" v-for="item in findProductList" :key="item.id">
				<navigator :url="`/pages/home/goodsInfo/goodsInfoS/goodsInfoS?id=${item.id}`">
				<image :src="item.pic" style="width: 160px; height: 120px;"></image>
				<view class="show-text1"> {{item.name}} </view>
				<view class="show-text2">&#36 {{item.price}} 元起</view>
				 </navigator>
				<view class="show-text3"> 不凡 </view>
			</view>
		</view>
		<!-- 尾巴标签 -->
	</view>
</template>

<script>
	import {
	
		findProductList
	
	} from "@/api/home/index.js"
	export default {
		data() {
			return {
				start:1,
				limit:10,
				current:0,
				isDesc:0,
				findProductList:[],
				id:"",
				sortBy:"",
				list:[{
					name:"新品",
					isIconSelected:" default"
				},
				{
					name:"销量",
					isIconSelected:" default"
				},
				{
					name:"价格",
					isIconSelected:" default"
				},
				{
					name:"筛选",
					isIconSelected:" default"	
				}],
			};
		},
		methods:{
			init(){
				var _this = this;
				findProductList(this.start,this.limit,{
					"categoryId":this.id,
					"isDesc": 0,
					"sortBy": this.sortBy 
				})
				.then(res =>{
					console.log(res)
					_this.findProductList = res.data.data.rows
					
				})
			},
			currentEve(val){
				this.current = val;
				// 重置
				this.list.forEach((ele,idx)=>{
					if(idx == val){
						
					}else{
						ele.isIconSelected = "default"
					}
					
				})
				
				
				var item = this.list.find((ele,idx)=>idx == val);
				if(item.name == "销量"){
					this.sortBy ="sale"
				}
				if(item.name == "价格"){
					this.sortBy = "price"
				}
				if(item.isIconSelected == "default"){
					item.isIconSelected = "up"
					this.isDesc = 1;
				}else if(item.isIconSelected == "up"){
					item.isIconSelected ="down"
					this.isDesc = 0;
				}else{
					item.isIconSelected = "up"
					this.isDesc = 1;
				}
				this.init()
			}
		},
		onLoad(ele){
			this.id =ele.id
			this.init()
			
		}
	}
</script>

<style lang="scss" scoped>
	// 头部
.heads{
	width: 100%;
	height: 50px;
	background-color: #354E44;
	display: flex;
	align-items: center;
	
	justify-content: space-around;
	
	.heads-item{
		display: flex;
		align-items: center;
		  color: #FFFFFF;
		justify-content: center;
		.heads-item1{
			display: flex;
			flex-direction: column;
			color: #FFFFFF;
		}
	}
	
}
.red{
		color: red!important;
		
	}
	// 商品展示区
	.show-img{
		padding-top: 20px;
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content:  space-around;
		flex-wrap: wrap;
		align-items: center;
		.show-content{
			width: 48%;
			position: relative;
			image{
				
			}
			.show-text1{
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;	
			}
			.show-text3{
				position: absolute;
				right: 20px;
				bottom: 0;
			}
		}
	}
</style>
